{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="10" >
            <el-button type="primary" size="small" @click="add">新增轮播图</el-button>
            <el-select v-model="module_id" placeholder="请选择">
                <el-option label="全部" :value="0"></el-option>
                <el-option :label="item.title" :value="item.id" v-for="item of artmodules"></el-option>
            </el-select>
        </el-col>
    </el-row>


    <el-table
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id"
          :width="80"
          align="center">
        </el-table-column>
        <el-table-column
          label="标题"
          prop="title">
        </el-table-column>
        <el-table-column
          label="所属模块"
          width="120"
          align="center"
          prop="module">
        </el-table-column>
        <el-table-column
          label="链接"
          align="center"
          prop="link">
        </el-table-column>
        <el-table-column
          label="Image"
          width="150"
          align="center">
          <template slot-scope="c">
              <img :src="imagePrefix+c.row.image" style="width: 120px;height: auto;">
          </template>
        </el-table-column>
        <el-table-column
          label="新窗口打开"
          align="center"
          prop="is_blank"
          width="80"
          >
            <template slot-scope="status">
                <el-tag v-if="status.row.is_blank">是</el-tag>
                <el-tag v-else>否</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          prop="status"
          width="80"
          >
            <template slot-scope="status">
                <el-tag type="success" v-if="status.row.status">启用</el-tag>
                <el-tag type="info" v-else>禁用</el-tag>
            </template>
        </el-table-column>
        
        <el-table-column label="操作" width="350">
            <template slot-scope="c">
                <el-button type="danger" size="mini" @click="_wspost('{:url(\'del\')}',{id:c.row.id})">删除</el-button>
                <el-button v-if="c.row.status" type="info" size="mini" @click="close(c.row)">禁用</el-button>
                <el-button v-else type="primary" size="mini" @click="close(c.row)">启用</el-button>
                <el-button type="success" size="mini" @click="edit(c.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page">{$list->render()|raw}</div>

    <!-- 修改用户信息 start -->
    <el-dialog :title="dialogTitle" width="500px" :visible.sync="addVisible">
        <el-form ref="forms" :model="data" :rules="rules" label-width="80px">
            <el-form-item label="标题"prop="title">
                <el-input v-model="data.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="模块选择"prop="module_id">
                <el-select v-model="data.module_id" placeholder="请选择模块">
                    <el-option
                      v-for="item in artmodules"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                      >
                    </el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="链接" prop="link">
                <el-input v-model="data.link" placeholder="跳转链接"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="data.status">
                    <el-radio :label="0">禁用</el-radio>
                    <el-radio :label="1">启用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="新窗口打开" prop="is_blank">
                <el-radio-group v-model="data.is_blank">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="Image" prop="is_blank">
                <el-upload
                  action="{:url('add')}"
                  :data="{id:data.id,image:data.image}"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="data.image" :src="imagePrefix+data.image" style="width: 80%;height: auto;">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit('forms','{:url(\'add\')}')">提 交</el-button>
        </div>
    </el-dialog>
    <!-- 修改用户信息 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->toJson()|raw}, // 列表数据
        artmodules:{$artmodules->toJson()|raw},
        module_id:{$module_id|default=0},
        imagePrefix:"{:images('')}",
        addVisible:false, //添加菜单框
        dialogTitle:'',
        data:{}, // 添加、编辑数据
        row:{},
        rules:{
            name:[
                {required: true, message:'请输入标题'},
            ],
            module_id:[
                {required: true, message:'请选择模块'},
            ],
            image:[
                {required: true, message:'请上传轮播图'},
            ],
        },
    },
    created(){
        this.emptyData();
    },
    watch:{
        module_id(val){
            this.href("{:url('')}?module_id="+val);
        },
        addVisible(val){
            if(!val)this.row={};
        }
    },
    methods:{
        emptyData(newData={}){
            this.data=Object.assign({
                title:'',
                module_id:'',
                link:'',
                status:1,
                is_blank:0,
                image:'',
            },newData);
        },
        handleAvatarSuccess(res,file){
            if(res.status===0){
                this.data.image=res.data;
                this.row.image=res.data;
            }
            if(res.msg){
                this.$message.success(res.msg)
            }
        },
        beforeAvatarUpload(file){
            if (file.type.indexOf('image')===-1) {
              this.$message.error('仅允许上传图片文件!');
              return;
            }
            return true;
        },
        showDialog(isShow=true){
            this.addVisible=isShow;
        },
        // 新增
        add(data){
            this.dialogTitle='新增轮播图';
            this.emptyData(data);
            this.showDialog();
        },
        // 编辑
        edit(row){
            this.row=row;
            this.dialogTitle='编辑轮播图';
            this.emptyData(row);
            this.showDialog();
        },
        // 禁用、启用用户
        close(row){
            this._wspost("{:url('close')}",{'id':row.id},res=>{
                if(res.code){
                    row.status=!row.status;
                }
            },false);
        },
        
    },
});
</script>
{/block}